<script lang="ts" setup>
  import * as echarts from 'echarts';

  var drawAsMonth = () => {
    type EChartsOption = echarts.EChartsOption;
    var chartDom = document.getElementById('asMonth')!;
    var myChart = echarts.getInstanceByDom(
      chartDom
    );
    if (myChart == null) {
      myChart = echarts.init(chartDom);
    }
    var option: EChartsOption;

    option = {
      title: {
        text:"月（人/天）",
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      grid: {
        left: '3%',
        right: '3%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
          axisTick: {
            alignWithLabel: true
          }
        }
      ],
      yAxis: [
        {
          type: 'value'
        }
      ],
      series: [
        {
          name: '人天',
          type: 'bar',
          barWidth: '60%',
          data: [700, 800,  1000, 1200, 1500, 2000, 3000, 2500, 3000, 3600, 3800, 4000]
        }
      ]
    };
    option && myChart.setOption(option);
  }

  var drawAsProduct = () => {
    type EChartsOption = echarts.EChartsOption;

    var chartDom = document.getElementById('asProduct')!;
    var myChart = echarts.getInstanceByDom(
      chartDom
    );
    if (myChart == null) {
      myChart = echarts.init(chartDom);
    }
    var option: EChartsOption;

    option = {
      title: {
        text:"产品（人/天）",
      },
      legend: {},
      tooltip: {},
      dataset: {
        source: [
          ['product', '1月', '2月', '3月', '4月','5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
          ['TongWeb', 41.1, 30.4, 65.1, 53.3, 41.1, 30.4, 65.1, 53.3, 41.1, 30.4, 65.1, 53.3],
          ['TongLink/Q', 86.5, 92.1, 85.7, 83.1, 41.1, 30.4, 65.1, 53.3, 41.1, 30.4, 65.1, 53.3],
        ]
      },
      xAxis: [
        { type: 'category', gridIndex: 0 }
      ],
      yAxis: [{ gridIndex: 0 }],
      grid: [{ left: '3%',
        right: '3%',
        bottom: '3%',
        containLabel: true
      }],
      series: [
        // These series are in the first grid.
        { type: 'bar', seriesLayoutBy: 'row' },
        { type: 'bar', seriesLayoutBy: 'row' },
      ]
    };
    option && myChart.setOption(option);
  }

  var drawAsIndustryTW = () => {
    type EChartsOption = echarts.EChartsOption;

    var chartDom = document.getElementById('asIndustryTW')!;
    var myChart = echarts.getInstanceByDom(
      chartDom
    );
    if (myChart == null) {
      myChart = echarts.init(chartDom);
    }
    var option: EChartsOption;

    option = {
      title: {
        text:"行业（人/天）TW",
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        top: '5%',
        left: 'center'
      },
      series: [
        {
          name: '行业',
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2
          },
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 40,
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: [
            { value: 1048, name: '政府' },
            { value: 735, name: '交通' },
            { value: 580, name: '金融' },
            { value: 484, name: '电信' },
            { value: 300, name: '军工' }
          ]
        }
      ]
    };
    option && myChart.setOption(option);
  }

  var drawAsIndustryTLQ = () => {
    type EChartsOption = echarts.EChartsOption;

    var chartDom = document.getElementById('asIndustryTLQ')!;
    var myChart = echarts.getInstanceByDom(
      chartDom
    );
    if (myChart == null) {
      myChart = echarts.init(chartDom);
    }
    var option: EChartsOption;

    option = {
      title: {
        text:"行业（人/天）TLQ",
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        top: '5%',
        left: 'center'
      },
      series: [
        {
          name: '行业',
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 40,
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: [
            { value: 1048, name: '政府' },
            { value: 735, name: '交通' },
            { value: 580, name: '金融' },
            { value: 484, name: '电信' },
            { value: 300, name: '军工' }
          ]
        }
      ]
    };
    option && myChart.setOption(option);
  }

  onMounted(()=>{
    console.log("onMounted...")
    setTimeout(() => {
      drawAsMonth();
      drawAsProduct();
      drawAsIndustryTW();
      drawAsIndustryTLQ();
    }, 200);
  })
  onUnmounted(()=>{

  })
</script>
<template>
  <div class="container">
    <div id="asMonth" ref="asMonth" class="main"></div>
    <div id="asProduct" ref="asProduct" class="main"></div>
    <div class="industry-container">
      <div id="asIndustryTW" ref="asIndustryTW" class="main-half"></div>
      <div id="asIndustryTLQ" ref="asIndustryTLQ" class="main-half"></div>
    </div>
  </div>
</template>

<style scoped>
  .container{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;

    margin: 8px;
  }
  .main {
    width: 98%;
    height: 360px;
    background-color: white;
    margin: 5px;
  }

  .main-half {
    width: 50%;
    height: 360px;
    margin: 3px;
    background-color: white;
  }

  .industry-container{
    width: 98%;
    height: 360px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin: 5px;
  }
</style>
